<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div
    class="Attractions"
    v-loading="loading2"
    element-loading-text="Loading..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    style="width: 93%"
  >
    <h2>
      <dv-decoration7 style="width:150px;height:30px;">附近景点</dv-decoration7>
    </h2>
    <!-- {{ Policy_list }} -->
    <template v-if="Policy_list.length>0">
      <div class="Attractions_box">
        <div
          v-for="item in Policy_list"
          :key="item"
          class="Attractions_item custom-loading-svg"
          v-loading="loading"
          :element-loading-svg="svg"
          element-loading-svg-view-box="-10, -10, 50, 50"
        >
          <div class="Attractions_list">
            <div class="Policy_user">
              <h3 class="Policy_title1">景点名称:</h3>
              <p class="Policy_data">{{ item.DIM_SPOT }}</p>
            </div>
            <div class="Policy_info">
              <h3 class="Policy_row">评价等级：</h3>
              <p class="row_data">   
                <p class="info">
            <el-rate
              :texts="['超级差', '差', '一般', '良', '优秀']"
              show-text
              disabled
              show-score
              text-color="#A31127"
              score-template="{value} 分"
              v-model="item.rate_data"
              allow-half
            />
          </p></p>
           

              <!-- <h3 class="Policy_title2">详细地址:</h3>
              <p class="Policy_data">{{ item.LOCATION }}</p>-->
            </div>
            <div class="Policy_info">
              <h3 class="Policy_title2">详细地址:</h3>
              <p class="Policy_data">{{ item.LOCATION }}</p>
            </div>
          </div>
          <div class="Attractions_btn">
            <el-button type="primary" text bg @click="set_default_city(item)">设置默认</el-button>
            <el-button type="primary" text bg @click="go_info(item)">景点分析</el-button>
            <el-button type="primary" text bg @click="go_comment(item)">评论总结</el-button>
          </div>
        </div>
      </div>
      <div class="more_data">
        <el-button type="primary" :loading-icon="Eleme" @click="load2" :loading="loading">加载更多</el-button>
      </div>
    </template>
    <template v-else>
      <div class="empty_box">
        <el-empty description="空" :image-size="200">很抱歉，该景点附近无推荐</el-empty>
      </div>
    </template>
    <!-- <el-empty description="description" v-else /> -->
  </div>
</template>
    
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { Eleme } from "@element-plus/icons-vue";
import { menuStore } from "@/store/modules/menu";
const rate_list = ref(1);
const menulist = menuStore();
let { city_id, menu, city_select_list } = storeToRefs(menulist);
import { getNearbyAttractions } from "@/request/analysis";
let page = ref(1);
let Policy_list = ref([]);
const loading = ref(false);
const loading2 = ref(false);
let router = useRouter();
let route = useRoute();
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const Rowcount = computed(() => (status:any) =>{
  // return item.GRADE
  // return 3
  console.log("sta5555555555555555555555tus",status);
  
});
const load2 = async () => {
  loading.value = true;
  page.value += 1;
  await getNearbyAttractions({
    list_id: props.city_id_list,
    page: page.value
  }).then(({ data }) => {
    data.forEach(item => {
      item.src_id = Math.floor(Math.random() * 8) + 1;
      item.rate_data = item.SPOT_GRADE_TOP5 ?  item.SPOT_GRADE_TOP5: item.GRADE;
      Policy_list.value.push(item);
    });
    loading.value = false;
  });
};
const props = defineProps<{
  city_id_list: String;
}>();
const get_data = async (item: any) => {
  page.value =1
  loading2.value = true;
  await getNearbyAttractions({
    page: page.value,
    // list_id: 272
    list_id: item
  }).then(({ data }) => {
    data.forEach(item => {
      item.src_id = Math.floor(Math.random() * 8) + 1;
      item.rate_data = item.SPOT_GRADE_TOP5 ?  item.SPOT_GRADE_TOP5: item.GRADE;
      // rate_list.value = props.info_data.SPOT_GRADE_TOP5 ?  props.info_data.SPOT_GRADE_TOP5: props.info_data.GRADE;
    });
    // console.log("推荐", data);

    Policy_list.value = data;
    loading2.value = false;
  });
};

const go_info = (item: any) => {
  console.log(item);
  // console.log(item.DIM_SPOT_ID);
  // console.log("景点分析");

  menulist.city_id = item;
  router.push({
    path: "/SceneryPoint",
    query: {
      id: item.SPOT_ID ? item.SPOT_ID : item.DIM_SPOT_ID
    }
  });

  // console.log(city_id.value);
};
const go_comment = (item: any) => {
  console.log(item);
  console.log("查看评论");

  menulist.city_id = item;
  router.push({
    path: "/ReView",
    query: {
      id: item.SPOT_ID ? item.SPOT_ID : item.DIM_SPOT_ID
    }
  });

};
const set_default_city = (item: any) => {
  console.log("设置默认");
  menulist.default_city = item;
};

watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      get_data(newValue);
    }
  }
);
// let route = useRoute();
</script>
    
    <style lang="scss" scoped>
.Attractions {
  color: rgb(19, 195, 207);
  display: flex;
  flex-direction: column;
  justify-content: center;
  object-fit: cover;
  padding: 15px 15px;
  width: 90%;
  // background-color: azure;
  height: 95% !important;
  h2 {
    // background-color: #00ddc0;
    // line-height: 50px;
    height: 40px;
    color: #f0e7e7;
    text-align: center;
    margin: 0 auto;
    font-size: 17px;
    // justify-content: center;
  }
  // float: left !important;
  // flex-wrap: wrap;
  overflow: hidden;
  // justify-content: center;
  // height: 500px;
  // margin-bottom: 20px;
  // padding-bottom: 10px;
  // gap: 7px;
  // align-items: center;
  // text-align: center;
  .empty_box {
    text-align: center;
    margin: 0 auto;
  }
  .Attractions_box {
    // height: calc(70vh - 5px);
    display: block;
    height: 95% !important;
    overflow-y: scroll;
    width: 95%;
    // background-color: aqua;
  }
  .Attractions_item {
    // border-radius: 20px;

    display: flex;
    flex-direction: column;
    width: 90%;
    background-color: rgb(44, 47, 48);

    border: 3px rgb(0, 255, 170) solid;
    height: auto;
    padding: 10px;
    // display: flex;
    // flex-direction: column;
    margin-bottom: 20px;
    // float: left;
    // padding: 10px;
    .Attractions_list {
      display: flex;
      flex-direction: column;
      .Policy_user {
        display: flex;
        flex-direction: row;
        width: 100%;
        // float: left;
        .Policy_title1 {
          font-size: 10px;
          width: 100px;
          // background-color: aqua;
          flex: 1;
        }
        .Policy_data {
          font-size: 10px;

          // display: inline;
          // float: left !important;
          flex: 3;
          // color: rgb(0, 255, 255);
        }
        // background-color: antiquewhite;
      }
      .Policy_info {
        display: flex;
        flex-direction: row;
        width: 100%;
        // float: left;
        margin-top: 20px;
        .Policy_row{
          flex: 1;
          font-size: 10px;
        }
        .Policy_title2 {
          font-size: 10px;
          // font-size: 10px;
          width: 100px;
          // background-color: aqua;
          flex: 1;
        }
        .row_data{
          margin-top: -7px;
          line-height: 0px;
          flex: 3;
        }
        .Policy_data {
          flex: 3;
          font-size: 10px;
        // background-color: aqua;
        }
      }
    }
    .Attractions_btn {
      height: 45px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border-top: 4px rgb(0, 255, 170) solid;
      // background-color: cadetblue;
      margin-top: 30px;
      padding-top: 10px;
      // padding-left: 10px;
      .el-button {
        width: 30%;
        // line-height: 40px;
        font-size: 10px;
      }
    }
  }
  .more_data {
    padding-top: 0px;
    height: 30px;
    width: 96%;
    font-size: 30px;
    // background-color: aquamarine;
    .el-button {
      width: 100%;
      height: 100%;
    }
  }
}
</style>